<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Games</title>
<style type="text/css">
.panel {
	position: relative;
	height: 700px;
	width: 580px;
	border: 1px solid rgb(148, 148, 247);
	background-color: #F0F5F8;
	margin-left: auto;
	margin-right: auto;
	margin-left: auto;
}

.app {
	position: relative;
	float: left;
	height: 132px;
	width: 100px;
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #AAD6F7;
}

.app:hover {
	background-color: #D6E8F5;
	cursor: pointer;
	border: 2px outset #AAD6F7;
	margin-left: 8px;
}

.icon {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	height: 90px;
	width: 90px;
	text-align: center;
}

.label {
	position: relative;
	height: 30px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	overflow: hidden;
	color: blue;
}
</style>
<script type="text/javascript">
	function openGame(url) {
		window.open(url, '_blank');
	}
</script>
</head>
<body>
	<div class="panel">
		<div class="app" onclick='javascript:openGame("snake/snake.html")'>
			<div class="icon">
				<img alt="snake" src="icon/icon_snake.jpg" border="0">
			</div>
			<div class="label">snake</div>
		</div>
		<div class="app" onclick='javascript:openGame("tetris/tetris.html")'>
			<div class="icon">
				<img alt="tetris" src="icon/icon_tetris.jpg" border="0">
			</div>
			<div class="label">tetris</div>
		</div>
		<div class="app" onclick='javascript:openGame("puzzle/puzzle.html")'>
			<div class="icon">
				<img alt="puzzle" src="icon/icon_puzzle.jpg" border="0">
			</div>
			<div class="label">puzzle</div>
		</div>
		<div class="app" onclick='javascript:openGame("lobby")'>
			<div class="icon">
				<img alt="gobang" src="icon/icon_gobang.jpg" border="0">
			</div>
			<div class="label">gobang</div>
		</div>
		<div class="app" onclick='javascript:openGame("huarongdao/huarongdao.html")'>
			<div class="icon">
				<img alt="huarongdao" src="icon/icon_huarongdao.jpg" border="0">
			</div>
			<div class="label">huarongdao</div>
		</div>
	</div>
</body>
</html>